import classnames from 'classnames'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { RootState } from '@/types/store'
import { differenceBy } from 'lodash'
import { changeActive, addChannel, delChannel } from '@/store/actions/home'
import { Channel } from '@/types/data'

type Props = {
  hide: () => void
}
const Channels = ({ hide }: Props) => {
  const dispatch = useDispatch()
  const { userChannels, allChannels, active } = useSelector((state: RootState) => state.home)
  // 得到一个推荐频道
  const recommendChannels = differenceBy(allChannels, userChannels, 'id')
  // 是否是编辑状态
  const [isEdit, setIsEdit] = useState(false)
  // 频道change
  const onChange = (id: number) => {
    // 编辑状态不允许切换
    if (isEdit) return
    dispatch(changeActive(id))
    hide()
  }
  // 编辑
  const changeEdit = () => {

    setIsEdit(!isEdit)
  }
  // 添加频道
  const onAddChannel = (channel: Channel) => {
    dispatch(addChannel(channel))
  }
  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={hide} />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', isEdit && 'edit')}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">{
              isEdit ? '点击删除频道' : '点击进入频道'
            }</span>
            <span className="channel-item-edit"
              onClick={changeEdit}>{
                isEdit ? '完成' : '编辑'
              }</span>
          </div>
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {userChannels.map(item => (
              <span className={classnames(
                'channel-list-item',
                item.id === active && 'selected'
              )}
                key={item.id}
                onClick={() => onChange(item.id)}>
                {item.name}
                {item.id !== 0 && (
                  <Icon type="iconbtn_tag_close"
                    onClick={() => {
                      if (userChannels.length <= 4) return
                      if (item.id === active) {
                        dispatch(changeActive(0))
                      }
                      dispatch(delChannel(item.id))
                    }}
                  />
                )}
              </span>
            ))}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra"
            >点击添加频道</span>
          </div>
          <div className="channel-list">
            {recommendChannels.map(item => (
              <span
                className="channel-list-item"
                key={item.name}
                onClick={() => onAddChannel(item)}>+ {item.name}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
